<template>
    <div>
        <audio :src="musicUrl" controls ref="audio" autoplay v-if="musicObj.isMusicDetail"></audio>
        <div class="musicListBox">
            <div class="musicListLeft">
                <div class="musicListImg">
                    <img :src="musicObj.coverImgUrl" alt />
                </div>
                <h1>简介</h1>
                <div style="width:200px">{{ musicObj.sheetDesc }}...</div>
                <div
                    style="width: 200px;height:44px; border-radius: 20px; background-color: #ffe443;font-size: 16px;
                text-align: center;line-height: 44px;"
                >下载该歌单</div>
            </div>
            <div class="musicListRight">
                <div class="musicListRightHeader">
                    <h1>{{ musicObj.title }}</h1>
                    <div class="authorInfo">
                        <div style="width: 30px;height: 32px;">
                            <img
                                style="width: 100%;
                                border-radius: 50%;
                        height: 100%;"
                                :src="musicObj.creatorInfo.avatarUrl"
                                alt
                            />
                        </div>
                        <span style="font-size: 15px;">{{ musicObj.creatorInfo.nickname }}</span>
                    </div>
                    <div class="musicListRightBtn">
                        <div style="background-color:#ffe443" @click="toPlay">
                            <i class="iconfont icon-bofang"></i>
                            {{ musicObj.isMusicDetail ? '播放' : '播放全部' }}
                        </div>
                        <div>
                            <i class="iconfont icon-tianjia"></i>添加
                        </div>
                        <div>
                            <i class="iconfont icon-shoucang"></i>收藏
                        </div>
                        <div>
                            <i class="iconfont icon-fenxiang"></i>分享
                        </div>
                        <div>
                            <i class="iconfont icon-pinglun"></i>评论
                        </div>
                    </div>
                    <!-- 歌曲列表 -->
                    <el-table
                        :data="musicObj.musicList"
                        style="width: 100%"
                        v-if="!musicObj.isMusicDetail"
                        @row-click="toMusicDetail"
                    >
                        <el-table-column prop="order" label="序号" width="70" />
                        <el-table-column prop="musicname" label="歌曲" width="300" />
                        <el-table-column prop="songer" label="歌手" width="260" />
                        <el-table-column prop="time" label="时长" />
                    </el-table>
                    <!-- 歌词 -->
                    <ul class="lyric" v-else ref="lyric">
                        <li
                            v-for="(item, index) in musicObj.lyricList"
                            :class="play == item ? 'play' : ''"
                            :key="index"
                        >{{ item }}</li>
                    </ul>
                    <!-- 分页器 -->
                    <div
                        v-if="!musicObj.isMusicDetail"
                        style="display: flex;justify-content: center;margin: 20px 0;"
                    >
                        <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
                    </div>
                    <!-- 评论区 -->
                    <div class="musicListComment">
                        <h1>
                            热门评论
                            <span
                                style="font-size: 14px;color: #ccc;"
                            >{{ musicObj.commentTotal }}条</span>
                        </h1>
                        <div
                            class="each-Comment"
                            v-for="hotCommentItem in musicObj.hotComments"
                            :key="hotCommentItem.commentId"
                        >
                            <div class="each-CommentImg">
                                <img :src="hotCommentItem.user.avatarUrl" alt />
                            </div>
                            <div class="each-CommentContent">
                                <div class="each-CommentName">{{ hotCommentItem.user.nickname }}</div>
                                <p style="font-size: 14px;">{{ hotCommentItem.content }}</p>
                                <span
                                    style="color: #DCDCDC; font-size: 13px;"
                                >{{ hotCommentItem.timeStr }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// 节流函数
import debounce from 'lodash.debounce'
export default {
    data() {
        return {
            play: '',
            count: 0,
        }
    },
    props: ['musicObj', 'musicUrl'],
    watch: {
        play() {
            this.count++
            if (this.count >= 12) {
                this.$refs.lyric.scrollTop = 19 * this.count
            }
        }
    },
    computed: {
    },
    methods: {
        toPlay() {
            this.$refs.audio.play()
        },
        toPause() {
            this.$refs.audio.pause()
        },
        toMusicDetail(e) {
            this.$router.push({ name: 'MusicDetail', params: { id: e.id } })
        }
    },
    mounted() {
        (() => {
            // console.log(this);
            if (!this.musicObj.isMusicDetail) return
            this.$refs.audio.addEventListener('timeupdate',
                debounce((event) => {
                    let a = parseInt(event.target.currentTime) + ''
                    if (!this.musicObj.lyricList[a]) return
                    this.play = this.musicObj.lyricList[a]
                }, 250)
            );
        })()

    }
}
</script>
<style  scoped>
.musicListBox {
    margin: 0 auto;
    width: 1200px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}
/* 左边 */
.musicListLeft {
    width: 30%;
    height: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.musicListImg {
    width: 200px;
    height: 200px;
}
.musicListImg img {
    width: 100%;
    height: 100%;
}
/* 右边 */
.musicListRight {
    width: 70%;
}
.authorInfo {
    width: 140px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.musicListRightBtn {
    display: flex;
    margin-bottom: 30px;
}
.musicListRightBtn div {
    width: 120px;
    height: 40px;
    border-radius: 20px;
    background-color: #f2f2f2;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #333;
    margin-right: 20px;
}
.musicListRightBtn div .iconfont {
    font-size: 20px;
    line-height: 40px;
}

/* 评论区 */
/* .musicListComment {
} */

.each-Comment {
    width: 100%;
    display: flex;
    margin: 16px 0 20px;
}
.each-CommentImg {
    width: 42px;
    height: 42px;
    margin-right: 10px;
}
.each-CommentImg img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}
.each-CommentName {
    font-size: 16px;
    font-weight: bolder;
}

/* 歌词 */
.lyric {
    overflow: hidden;
    font-size: 14px;
    height: 532px;
    list-style: none;
    color: #666;
}
.play {
    color: rgb(255 228 67);
    font-size: 20px;
    margin: 5px 0;
}
</style>
